<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>导航设置</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">导航标题</label>
                            <div class="layui-input-inline">
                                <input type="text" name="title" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">导航地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="url" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">启用</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="close" lay-skin="switch" lay-text="开启|关闭">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">全局</label>
                            <div class="layui-input-block">
                                <input type="checkbox" name="overall" lay-skin="switch" lay-text="开启|关闭">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <label class="layui-form-label">导航排序</label>
                            <div class="layui-input-inline">
                                <input type="text" name="sort" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                        <div class="layui-inline">
                            <button type="button" class="layui-btn layui-btn-primary" lay-submit
                                lay-filter="data-search-btn"> 添加</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
        <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>

    </div>
</div>

<script type="text/html" id="statusTemp">
    <input class="layui-btn-xs" type="checkbox" name="siteStatus" lay-skin="switch" lay-text="开启|关闭" value={{ d.inc_id}}
    {{d.close=='on'?'checked':'off'}} lay-filter="status">
</script>

<script type="text/html" id="regionTemp">
    <input class="layui-btn-xs" type="checkbox" name="siteStatus" lay-skin="switch" lay-text="全局|PC" value={{ d.inc_id}}
    {{d.overall=='on'?'checked':'off'}} lay-filter="regions">
</script>

<script id="model" type="text/html">
    <form class="layui-form layui-form-pane" id="bannerset" lay-filter="bannerset" style="padding: 20px">
        <!--隐藏id-->
        <input name="siteId" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">导航标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" lay-verify="required" placeholder="请输入导航标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">导航地址</label>
            <div class="layui-input-block">
                <input type="text" name="url" lay-verify="required" placeholder="请输入导航地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">导航排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" lay-verify="required" placeholder="请输入排序" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="doSubmit" id="doSubmit" value="确认">
        </div>
    </form>
</script>

<script>
    layui.use(['form', 'table', 'miniPage', 'lycms'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            miniPage = layui.miniPage,
            lycms = layui.lycms;
        form.render();
        table.render({
            elem: '#currentTableId',
            url: '/v1/admin/data/navset',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                { field: "inc_id", title: '序号', width: 80, align: "center" },
                { field: 'title', title: '导航标题' },
                { field: 'url', title: '导航地址', sort: true },
                { field: 'overall', templet: '#regionTemp', title: '范围', width: 100, align: "center" },
                {
                    field: 'sort', title: '排序', sort: true, width: 80, align: "center"
                },
                { field: 'close', templet: '#statusTemp', title: '状态', width: 100, align: "center" },
                { field: 'time', width: 220, title: '添加时间', sort: true },
                { title: '操作', width: 120, minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center" }
            ]],
        });

        // 监听添加操作
        form.on('submit(data-search-btn)', function (data) {
            lycms.navsetOperate(data);
            return false;
        });


        // 监听范围
        form.on('switch(regions)', function (data) {
            $.ajax({
                url: "/ask/action/system/navset/edit",
                type: "post",
                dataType: "json",
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                data: {
                    inc_id: data.value,
                    overall: data.elem.checked ? 'on' : ''
                },
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, { time: 1500 });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        });

        // 监听状态
        form.on('switch(status)', function (data) {
            $.ajax({
                url: "/ask/action/system/navset/edit",
                type: "post",
                dataType: "json",
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                data: {
                    inc_id: data.value,
                    close: data.elem.checked ? 'on' : ''
                },
                success: function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg, { time: 1500 });
                    } else {
                        layer.msg(res.msg);
                    }
                }
            })
        });

        //监听操作
        table.on('tool(currentTableFilter)', function (obj) {
            lycms.navOperate(obj, "#model", "doSubmit")
        });

    });
</script>